/**
 * Clodus AI - Design Tokens
 */

:root {
  /* --- COLORS (Clodus Identity) --- */
  --sl-color-brand: #2DA581;
  --sl-color-brand-dark: #217a60;
  --sl-color-brand-light: #52c7a6;

  --sl-color-downriver: #111827;
  --sl-color-slate: #475569;
  --sl-color-slate-light: #6b7280;
  --sl-color-gray-medium: #adbdcc;
  --sl-color-gray-light: #f8fafc;

  /* Semantic Layer */
  --sl-text-heading: var(--sl-color-downriver);
  --sl-text-body: var(--sl-color-slate);
  --sl-text-muted: var(--sl-color-slate-light);

  --sl-bg-page: #ffffff;
  --sl-bg-section: var(--sl-color-gray-light);
  --sl-bg-raised: #f1f5f9;
  --sl-bg-card: #ffffff;

  /* --- TYPOGRAPHY --- */
  /* Using Inter with specific settings to mimic Sohne */
  --sl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --sl-tracking-tight: -0.02em;
  --sl-tracking-normal: 0;

  /* Font Scale (Optimized for 16px base) */
  --sl-fs-xs: 13px;
  --sl-fs-sm: 14px;
  --sl-fs-base: 16px;
  --sl-fs-md: 18px;
  --sl-fs-lg: 21px;
  --sl-fs-xl: 24px;
  --sl-fs-2xl: 32px;
  --sl-fs-3xl: 48px;
  --sl-fs-display: 64px;

  /* --- SPACING (8px Grid) --- */
  --sl-s-1: 4px;
  --sl-s-2: 8px;
  --sl-s-4: 16px;
  --sl-s-6: 24px;
  --sl-s-8: 32px;
  --sl-s-12: 48px;
  --sl-s-16: 64px;
  --sl-s-24: 96px;

  /* --- SHADOWS (Layered for Depth) --- */
  /* Subtle border + shadow combination */
  --sl-shadow-card:
    0 2px 5px rgba(0, 0, 0, 0.03),
    0 1px 1px rgba(0, 0, 0, 0.05);

  --sl-shadow-card-hover:
    0 15px 35px rgba(50, 50, 93, .1),
    0 5px 15px rgba(0, 0, 0, .07);

  --sl-shadow-button:
    0 4px 6px rgba(50, 50, 93, .11),
    0 1px 3px rgba(0, 0, 0, .08);

  --sl-shadow-button-hover:
    0 7px 14px rgba(50, 50, 93, .1),
    0 3px 6px rgba(0, 0, 0, .08);

  /* --- RADIUS --- */
  --sl-radius-sm: 4px;
  --sl-radius-md: 8px;
  --sl-radius-lg: 12px;
  --sl-radius-full: 99px;

  /* --- TRANSITIONS --- */
  --sl-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --sl-transition-base: 0.25s var(--sl-ease);

  /* --- SEMANTIC COLORS (for status) --- */
  --sl-color-success: #059669;
  --sl-color-warning: #d97706;
  --sl-color-error: #dc2626;
}